<div class="login-box">
    <!-- /.login-logo -->
    <div class="card card-outline card-primary">
        <div class="card-header text-center">
            <router-link to="/" class="h1"
                ><b>{{ $t("labels.admin") }}</b>{{ $t("labels.lte")
                }}</router-link
            >
        </div>
        <div class="card-body">
            <p class="login-box-msg">{{ $t("labels.signInToStart") }}</p>

            <form @submit.prevent="loginByAuth">
                <app-input
                    icon="envelope"
                    class="mb-3"
                    type="email"
                    placeholder="Email"
                    autocomplete="off"
                    v-model="email"
                />
                <app-input
                    icon="lock"
                    class="mb-3"
                    type="password"
                    placeholder="Password"
                    autocomplete="off"
                    v-model="password"
                />

                <div class="row">
                    <div class="col-7">
                        <div style="display: flex; align-items: center">
                            <pf-checkbox type="icheck" v-model="rememberMe" />
                            <label
                                style="margin: 0; padding: 0; padding-left: 4px"
                            >
                                {{ $t("labels.rememberMe") }}
                            </label>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-5">
                        <pf-button
                            type="submit"
                            :loading="isAuthLoading"
                            :disabled="isGoogleLoading"
                            @click="loginByAuth"
                        >
                            {{ $t("labels.signIn") }}
                        </pf-button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>

            <div class="social-auth-links text-center mt-2 mb-3">
                <pf-button
                    class="mb-2"
                    variant="primary"
                    :loading="isFacebookLoading"
                    :disabled="true || isAuthLoading || isGoogleLoading"
                    @click="loginByFacebook"
                >
                    <i class="fab fa-facebook mr-2"></i>
                    <span>{{ $t("labels.signInUsingFB") }}</span>
                </pf-button>
                <pf-button
                    variant="danger"
                    :loading="isGoogleLoading"
                    :disabled="isAuthLoading || isFacebookLoading"
                    @click="loginByGoogle"
                >
                    <i class="fab fa-google mr-2"></i>
                    <span>{{ $t("labels.signInUsingGoogle") }}</span>
                </pf-button>
            </div>
            <!-- /.social-auth-links -->

            <p class="mb-1">
                <router-link to="/forgot-password">
                    {{ $t("labels.forgotPassword") }}
                </router-link>
            </p>
            <p class="mb-0">
                <router-link to="/register" class="text-center">
                    {{ $t("labels.registerMembership") }}
                </router-link>
            </p>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
</div>
